<template>
  <div class="page luckdraw-invite">
    <div class="luckdraw-invite-container">
      <img :src="icons.actBg" mode="widthFix" class="act-bg"/>
      <div class="menu-section">
        <m-menu :menuList="['邀请小技巧', '我的好友']" @onClick="onMenuListClick"></m-menu>
      </div>
      <div class="rule" v-show="currentMenu === 0">
        <div class="rule-list">
          <!-- <div class="title"></div> -->
          <div class="content">
            <p>1. 邀请您的家人、朋友、同学同事一起参与抽奖，您将获得相应的金币；</p>
            <p>2. 自己参与抽奖后，点击分享、生成二维码再分享到微信朋友圈/微信群，成功邀请的机率会提高很多哦；</p>
            <p>3. 好友通过您分享进入天天派奖，成功绑定手机号，他将获得相应金币。他参与抽奖，您才会获得相应金币；</p>
            <p>4. 所获得的金币，是可以兑换成现金的哦，而且金币兑换现金的价格每天都会变动。</p>
          </div>
        </div>
      </div>
      <div class="friend-list" v-show="currentMenu === 1">
        <friend-list v-for="(item, i) in childrenList" :key="i" :listData="item"></friend-list>
        <div class="load-more">
          <span v-if="showNoMore">没有更多了</span>
          <span v-if="showLoadMore">加载中...</span>
        </div>
        <empty-tip v-if="showEmptyTip" title="暂无好友" :fullScreen="false"></empty-tip>
      </div>
      <div class="btn">
        <div class="btn-inner">
          <m-button text="马上邀请" type="red" @onClick="onShareClick"></m-button>
        </div>
      </div>
    </div>
    <m-actionsheet :show.sync="showShareActionsheet" :listData="shareActionsheetListData" @select="onShareSelect"></m-actionsheet>
  </div>
</template>

<script>
import mixins from 'comp/mixins'
import { apiDomain } from '@/utils/constant'
import MButton from 'comp/m-button'
import MMenu from 'comp/m-menu'
import FriendList from 'comp/friend-list'
import MActionsheet from 'comp/m-actionsheet'
import EmptyTip from 'comp/empty-tip'

export default {
  mixins: [mixins],
  components: {
    MButton,
    MMenu,
    FriendList,
    MActionsheet,
    EmptyTip
  },
  data () {
    return {
      icons: {
        actBg: `${require('static/images/invite-act-bg.png')}`
      },
      openId: '',
      currentMenu: 0,
      pageNumber: 1,
      showNoMore: false,
      showLoadMore: false,
      childrenList: [],
      showShareActionsheet: false,
      shareActionsheetListData: [
        {
          text: '邀请微信好友',
          type: 'share'
        },
        {
          text: '生成邀请海报'
        }
      ],
      showEmptyTip: false
    }
  },
  async mounted () {
    this.resetData()
    this.openId = await this.getOpenId()
  },
  onShareAppMessage () {
    return {
      title: `邀请你一起来[天天派奖]逛逛`,
      path: `/pages/index/main?parentId=${this.openId}`
    }
  },
  methods: {
    onMenuListClick (i) {
      this.currentMenu = i
      if (i === 1) {
        this.pageNumber = 1
        this.showNoMore = false
        this.showLoadMore = false
        this.childrenList = []
        this.showEmptyTip = false
        this.getChildrenList()
      }
    },
    /**
     * 获取我的下级列表
     */
    async getChildrenList () {
      let pageNumber = this.pageNumber
      const ret = await this.$store.dispatch('getPlayerChildren', {
        page: pageNumber++,
        rows: 30,
        playerid: this.openId
      })
      const arr1 = this.childrenList
      const arr2 = ret.list
      if (arr1.length === 0 && arr2.length === 0) {
        // 空
        this.showNoMore = false
        this.showLoadMore = false
        this.showEmptyTip = true
      } else {
        if (ret.list.length < 30) {
          // 没有更多了
          this.showNoMore = true
          this.showLoadMore = false
        } else {
          // 加载中...
          this.showLoadMore = true
        }
      }
      this.childrenList = arr1.concat(arr2)
      this.pageNumber = pageNumber
    },
    /**
     * 马上邀请
     */
    onShareClick () {
      this.showShareActionsheet = true
    },
    /**
     * 选中分享菜单
     */
    onShareSelect (i) {
      if (i === 1) {
        // 邀请海报
        const page = encodeURIComponent(`pages/index/main`)
        const scene = encodeURIComponent(this.openId)

        const posterUrl = encodeURIComponent(`${apiDomain}/poster/win?page=${page}&scene=${scene}`)
        wx.navigateTo({
          url: `/pages/invite-poster/main?posterUrl=${posterUrl}`,
        })
      }
    },
  }
}
</script>

<style lang="less" scoped>
.luckdraw-invite {
  background-color: #fff;
  &-container {
    padding-bottom: 147rpx;
  }
  .act-bg {
    display: block;
    width: 100%;
  }
  .rule {
    padding: 30rpx 30rpx;
    &-list {
      padding: 20rpx 0;
      .title {
        font-size: 30rpx;
        color: #333;
      }
      .content {
        font-size: 28rpx;
        // padding-top: 20rpx;
        color: #555;
        p {
          line-height: 1.5;
          padding: 6rpx 0;
        }
      }
    }
  }
  .friend-list {
    padding: 30rpx 0;
  }
  .btn {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 126rpx;
    background-color: #fff;
    border-top: 1rpx solid #ddd;
    &-inner {
      padding: 10px 10px;
    }
  }
  .load-more {
    text-align: center;
    color: #488ff0;
    font-size: 30rpx;
    padding: 30rpx 0 40rpx;
  }
}
</style>
